      
        <div class="row">
          <div class="product-item col-md-6 col-lg-4">
            <a href="#"><img data-src="holder.js/300x200?auto=yes"  alt="sample product" /></a>
            <h2><a href="#">Product Title</a></h2>
            <p>This text describes the above product a little not too much but just enough or maybe a little more</p>
            <a class="btn btn-secondary btn-sm pull-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
          </div>
          <div class="product-item col-md-6 col-lg-4">
            <a href="#"><img data-src="holder.js/300x200?auto=yes"  alt="sample product" /></a>
            <h2><a href="#">Longer Product Title</a></h2>
            <p>This text describes the above product a little not too much</p>
            <a class="btn btn-secondary btn-sm pull-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
          </div>
          <!-- Add the extra clearfix for only the required viewport -->
          <div class="clearfix hidden-sm-down hidden-lg-up"></div>
          <div class="product-item col-md-6 col-lg-4">
            <a href="#"><img data-src="holder.js/300x200?auto=yes"  alt="sample product" /></a>
            <h2><a href="#">Even Longer Product Title</a></h2>
            <p>This text describes the above product a little not too much but just enough -- or maybe we'll go on even longer on this one just because it's fun and, well, this product just really deserves it!</p>
            <a class="btn btn-secondary btn-sm pull-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
          </div>
          <!-- Add the extra clearfix for only the required viewport -->
          <div class="clearfix hidden-md-down"></div>
          <div class="product-item col-md-6 col-lg-4">
            <a href="#"><img data-src="holder.js/300x200?auto=yes"  alt="sample product" /></a>
            <h2><a href="#">Exceptional Product Title</a></h2>
            <p>This text describes the above product a little not too much but just enough</p>
            <a class="btn btn-secondary btn-sm pull-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
          </div>
          <!-- Add the extra clearfix for only the required viewport -->
          <div class="clearfix hidden-sm-down hidden-lg-up"></div>
          <div class="product-item col-md-6 col-lg-4">
            <a href="#"><img data-src="holder.js/300x200?auto=yes"  alt="sample product" /></a>
            <h2><a href="#">Even Longer Product Title</a></h2>
            <p>This text describes the above product a little not too much but just enough -- or maybe we'll go on even longer on this one just because it's fun and, well, this product just really deserves it!</p>
            <a class="btn btn-secondary btn-sm pull-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
          </div>
          <div class="product-item col-md-6 col-lg-4">
            <a href="#"><img data-src="holder.js/300x200?auto=yes"  alt="sample product" /></a>
            <h2><a href="#">Product Title</a></h2>
            <p>This text describes the above product a little not too much but just enough or maybe a little more</p>
            <a class="btn btn-secondary btn-sm pull-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
          </div>
          <!-- Add the extra clearfix for only the required viewport -->
          <div class="clearfix hidden-md-down"></div>
          <!-- Add the extra clearfix for only the required viewport -->
          <div class="clearfix hidden-sm-down hidden-lg-up"></div>
          <div class="product-item col-md-6 col-lg-4">
            <a href="#"><img data-src="holder.js/300x200?auto=yes"  alt="sample product" /></a>
            <h2><a href="#">Longer Product Title</a></h2>
            <p>This text describes the above product a little not too much</p>
            <a class="btn btn-secondary btn-sm pull-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
          </div>
          <div class="product-item col-md-6 col-lg-4">
            <a href="#"><img data-src="holder.js/300x200?auto=yes"  alt="sample product" /></a>
            <h2><a href="#">Even Longer Product Title</a></h2>
            <p>This text describes the above product a little not too much but just enough -- or maybe we'll go on even longer on this one just because it's fun and, well, this product just really deserves it!</p>
            <a class="btn btn-secondary btn-sm pull-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
          </div>
          <!-- Add the extra clearfix for only the required viewport -->
          <div class="clearfix hidden-sm-down hidden-lg-up"></div>
          <div class="product-item col-md-6 col-lg-4">
            <a href="#"><img data-src="holder.js/300x200?auto=yes"  alt="sample product" /></a>
            <h2><a href="#">Product Title</a></h2>
            <p>This text describes the above product a little not too much but just enough or maybe a little more</p>
            <a class="btn btn-secondary btn-sm pull-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
          </div>
